<template>
  <a-modal
    :maskClosable="false"
    :title="title"
    :width="width"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <div>
      <a-form-model layout="inline" style="margin-bottom: 10px">
        <a-form-model-item label="厂区">
          <a-select :disabled="readyStatus" v-model="sysOrgCode" style="width: 150px" @change="chooseFactory">
            <a-select-option :value="item.value" :key="index" v-for="(item, index) in factory">{{
              item.title
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="模型">
          <a-select :disabled="readyStatus" v-model="modelType" style="width: 80px" @change="changeType">
            <a-select-option value="0">3D</a-select-option>
            <a-select-option value="1" v-if="clickFlag == 'point' || clickFlag == 'fence'">2.5D</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="楼层" v-if="clickFlag == 'point' || clickFlag == 'fence'">
          <a-select
            :disabled="readyStatus"
            v-model="floor"
            placeholder="请选择"
            style="width: 80px"
            @change="chooseFloor"
          >
            <a-select-option :value="item" :key="index" v-for="(item, index) in floors">F{{ item }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <!-- 获取厂区模型数据， -->
          <a-button :disabled="readyStatus" type="primary" @click="showModel" style="margin-right: 10px">显示</a-button>
          <a-button :disabled="readyStatus" type="primary" @click="hideModel" style="margin-right: 10px">隐藏</a-button>
        </a-form-model-item>
      </a-form-model>
      <Map
        @ready="ready"
        ref="gisMap"
        v-if="visible"
        :clickFlag="clickFlag"
        style="height: 700px; width: 952px"
        @getPoint="getPoint"
        :location="location"
        :locations="locations"
        :height="height"
      />
    </div>
  </a-modal>
</template>
<script>
  import Map from './map'
  import {getFactoryList} from '@/api/gis'

  export default {
  name: 'mapPoint',
  props: {
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
    clickFlag: {
      type: String,
      default: '',
    },
  },
  components: {
    Map,
  },
  data() {
    return {
      title: '选择坐标',
      visible: false,
      readyStatus: true, //地图是否已加载结束
      width: 1000,
      height: '', //高度
      value: '',
      factory: [], //厂区数据
      modelType: '0', //模型类型
      selectFactory: {}, //选择的厂区数据
      sysOrgCode: '', //厂区
      floors: 0, //楼层数
      floor: 1, //楼层
      location: {}, //定位
      locations: [], //区域点位集合
    }
  },
  methods: {
    //地图加载完全
    ready() {
      this.readyStatus = false
      this.initData()
    },
    //初始化数据
    initData() {
      //初始化数据
      getFactoryList().then((res) => {
        if (res.success) {
          const _data = res.result || []
          if (_data.length == 0) return this.$message.error('您未有访问厂区的权限')
          this.factory = _data
          //设置厂区以及楼层属性
          const _selectFactory = this.factory.filter((item) => item.value == this.sysOrgCode)
          //新增
          if (_selectFactory.length == 0) {
            this.selectFactory = this.factory[0]
            this.selectFactoryFun()
          }
          //修改
          else{
            this.selectFactory = _selectFactory[0]
          }
          this.chooseFloor()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //计算厂区模型内哪个模型的楼层最高，展示哪个模型的
    calculateFloor(factory) {
      let _floor = 0
      factory.map((item) => {
        if (item.children && item.children.length > _floor) {
          _floor = item.children.length
        }
      })
      return _floor
    },
    //切换模型，楼层重置
    changeType(val) {
      if (val == 0) {
        this.threeShow(true)
      } else {
        this.chooseFloor()
      }
    },
    chooseFactory(val) {
      const _selectFactory = this.factory.filter((item) => item.value == val)
      if (_selectFactory.length) {
        alert(1);
        //切换厂区，数据重置
        //重置地图数据数据
        this.$refs.gisMap.reset()
        this.selectFactory = _selectFactory[0]
        this.selectFactoryFun()
      }
    },
    //切换楼层
    chooseFloor() {
      if (this.modelType == 1) {
        //更换B区因为楼层变化更新数据
        const select_floor_model = this.getModel(this.floor)
        this.$refs.gisMap.gotoDefaultPosition(select_floor_model)
      }
    },
    //设置选择的厂区
    selectFactoryFun() {
      this.sysOrgCode = this.selectFactory.value //选中的楼层id
      this.floors = this.calculateFloor(this.selectFactory.children) //楼层
      this.floor = 1
      this.modelType = '0'
      this.threeShow(true)
    },
    //3d模型显示状态
    threeShow(val) {
      //展示3d model
      if (val) {
        //切换3d 楼层floor 置为空，同时刷新数据
        const three_model = this.getModel()
        this.$refs.gisMap.gotoDefaultPosition(three_model)
      } else {
        this.$refs.gisMap.hideModel()
      }
    },
    getModel(val) {
      let _gisModel = []
      //2.5楼层
      if (val) {
        this.selectFactory.children &&
          this.selectFactory.children.map((item) => {
            item.children &&
              item.children.map((itemt) => {
                if (itemt.floor == val) {
                  _gisModel.push(itemt)
                }
              })
          })
      }
      //3d模型
      else {
        _gisModel = this.selectFactory.children || []
      }
      return _gisModel
    },
    show(value) {
      this.value = value
      if (JSON.stringify(this.value) != '{}') {
        console.log(this.value, 'value数据')
        const { location, sysOrgCode, floor, height, locations } = this.value
        this.sysOrgCode = sysOrgCode
        this.location = location
        this.locations = locations
        this.modelType = '1'
        this.height = height
        this.floor = parseInt(floor) //楼层为number类型
      } else {
        //打开的时候初始化数据
        this.selectFactory = {}
        this.sysOrgCode = ''
        this.location = {}
        this.locations = []
        this.modelType = '0'
        this.height = ''
        this.floor = parseInt(1)
      }
      this.visible = true
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      let _errMsg = ''
      if (this.clickFlag == 'point' && JSON.stringify(this.location) == '{}') {
        _errMsg = '请设置点位信息数据'
      } else if (this.clickFlag == 'area' || this.clickFlag == 'fence') {
        if (this.locations.length == 0) {
          _errMsg = '请绘制区域'
        } else if (!this.height) {
          _errMsg = '请设置区域数据高度'
        }
      }
       else if (this.clickFlag == 'lines') {
        if (this.locations.length == 0) {
          _errMsg = '请绘制区域'
        }
      }
      if (_errMsg) {
        return this.$message.error(_errMsg)
      }
      let obj = {
        sysOrgCode: this.sysOrgCode,
      }
      //点位
      if (this.clickFlag == 'point') {
        obj.location = this.location
        obj.floor = this.floor
      }
      //区域
      else if (this.clickFlag == 'area') {
        obj.height = this.height
        obj.locations = this.locations
      }
      //电子围栏
      else if (this.clickFlag == 'fence') {
        obj.height = this.height
        obj.locations = this.locations
        obj.floor = this.floor
      }
      //电子巡检路线
      else if (this.clickFlag == 'lines') {
        obj.locations = this.locations
      }
      this.$emit('choosePoint', obj)
      this.handleCancel()
    },
    //改变高度
    preview() {
      this.$refs.gisMap.preview('demo', this.height)
    },
    //显示模型
    showModel() {
      this.$refs.gisMap.showModel()
    },
    //显示或隐藏模型
    hideModel() {
      this.$refs.gisMap.hideModel()
    },
    //获取数据
    getPoint(val) {
      const { location, height, locations } = val
      this.location = location || {}
      this.locations = locations || []
      this.height = height || ''
    },
  },
}
</script>
<style scoped>
</style>